<script setup="">
import {ref} from "vue"
import RecentView from "@/views/home/RecentView.vue";
import BannerView from "@/views/home/BannerView.vue";
import ColumnView from "@/views/home/ColumnView.vue";

defineProps({
  msg: {
    type: String,
    required: false
  }
})

const tabName = ref(["动态信息", "首页轮播图", "政策宣传"])
const tabIndex = ref(0)

</script>

<template>
  <div class="px-5 my-3 mx-auto" style="max-width: 1400px">
    <div class="flex items-center mb-4 ml-3 mt-4 border-b ">
      <div v-for="(item,idx) in tabName" @click="tabIndex=idx" class="px-3.5 mr-2 pb-4 font-bold cursor-pointer select-none"
           :style="{
        color: tabIndex===idx?'var(--themeColor)':'#666',
        borderBottom: tabIndex===idx?'2px solid var(--themeColor)':'2px solid transparent',
        fontWeight: tabIndex===idx?'bold':'normal',
      }">{{ item }}
      </div>
    </div>
    <RecentView v-if="tabIndex===0"/>
    <BannerView v-if="tabIndex===1"/>
    <ColumnView v-if="tabIndex===2"/>

  </div>
</template>

<style scoped>
* {
  --el-pagination-hover-color: var(--themeColor);
  --el-input-focus-border-color: var(--themeColor);
}

/deep/ .el-input__wrapper {
  background-color: transparent;
}

/deep/ .el-dialog {
  border-radius: 25px;
}

/deep/ .el-date-editor--monthrange {
  --el-date-editor-width: 200px;
}

/deep/ .el-date-editor {
  --el-input-border-color: transparent;
  --el-input-focus-border-color: var(--themeColor);
}
</style>
